<template>
  <div>
  <!-- 表格 -->
  <el-card style="margin: 10px 0px">
    <el-alert style="margin-bottom: 10px;" type="warning" title="合并分类：将源分类合并进目标分类；移动分类：将源分类移动到目标分类下" :closable="false" show-icon></el-alert>
  </el-card>
  <tree-table
    :data="categoryList"
    :columns="columns"
    :selection-type="false"
    :expand-type="false"
    show-index
    index-text="#"
    border
    class="tree-table">
    <template slot="icon" slot-scope="scope">
      <img :src="scope.row.imageUrl" alt="" style="width: 50px; height: 50px" v-if="scope.row.imageUrl"/>
      <span v-else>无图片</span>
    </template>
    <template slot="order" slot-scope="scope">
      <el-tag size="mini" v-if="scope.row.level === 1">一级</el-tag>
      <el-tag type="warning" size="mini" v-else>二级</el-tag>
    </template>
    <template slot="status" slot-scope="scope">
      <el-switch v-model="scope.row.status" active-text="显示" inactive-text="不显示" :active-value=1
                 :inactive-value=2 @change="changeStatus(scope.row)">
      </el-switch>
    </template>
    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
      <category-edit :categoryId="scope.row.categoryId" @category-list="updateCategoryList"/>
      <!--<el-button type="danger" size="mini" icon="el-icon-document-remove" @click="moveCategory(scope.row.categoryId)">移动</el-button>-->
      <category-move :categoryId="scope.row.categoryId" :level="scope.row.level" @category-list="updateCategoryList"/>
    </template>
  </tree-table>
  </div>
</template>

<script>

import CategoryEdit from './CategoryEdit'
import CategoryMove from './CategoryMove'
import { updateCategoryStatus } from '../../../network/goods'

export default {
  name: 'CategoryTable',
  components: {
    CategoryEdit,
    CategoryMove
  },
  props: {
    categoryList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 为table指定列
      columns: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '图标',
          type: 'template',
          template: 'icon'
        },
        {
          label: '级数',
          type: 'template',
          prop: 'level',
          template: 'order'
        },
        {
          label: '状态',
          type: 'template',
          prop: 'status',
          template: 'status'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt',
          width: '300px'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    updateCategoryList () {
      this.$emit('category-list')
    },
    changeStatus (row) {
      console.log('row state:', row)
      updateCategoryStatus({ categoryId: row.categoryId, status: row.status }).then(res => {
        if (res.status !== 200) {
          return this.alertMessage('修改分类状态失败', 'error')
        }
        this.alertMessage('修改分类状态成功', 'success')
        this.updateCategoryList()
      })
    },
    moveCategory (categoryId) {
    }
  }
}
</script>

<style scoped>
.checkIcon {
  color: lightgreen;
  font-size: 17px;
}

.closeIcon {
  color: red;
  font-size: 17px;
}

.tree-table {
  margin-top: 15px;
}

.custom-table-column {
  width: 300px;
}
</style>
